<!--
 * @customMade: 赵宇
 * @Date: 2022-02-08 13:30:11
 * @LastEditTime: 2023-04-23 11:38:23
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\home\index.vue
-->
<template>
  <!-- 菜单-->
  <div class="index">
    <sidebar />
    <div class="index-right">
      <header class="index-right-header">
        <tags v-model="header.tagsList" @closeTags="closeTags" @closeOther="closeOther" class="index-right-header-tags" />
        <header-info></header-info>
      </header>
      <div class="index-right-box">
        <transition name="fade">
          <!-- 本来懒得用缓存了。 -->
          <!-- <router-view v-if="type"> </router-view> -->
          <router-view v-slot="{ Component, route }">
            <keep-alive :include="header.keepAliveList" :max="10">
              <component :is="Component" :key="route.meta.cache ? route.fullPath : undefined" />
            </keep-alive>
          </router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import sidebar from './components/sidebar.vue';
import tags from './components/tags.vue';
import headerInfo from './components/headerInfo.vue';
let route = useRoute();
let router = useRouter();
let store = useStore();
let header = reactive({
  keepAliveList: [],
  tagsList: []
});
let type = import.meta.env.DEV;
// 页面标签 加 路由缓存
const routePush = () => {
  if (!header.tagsList.some(r => r.fullPath === route.fullPath)) {
    header.tagsList.push({
      title: route.meta.title,
      path: route.path,
      fullPath: route.fullPath
    });
  }
  // 是否需要缓存
  if (!route.meta.cache) return;
  const path = route.path.replace('/', '');
  if (header.keepAliveList.find(r => r === path)) return;
  header.keepAliveList.push(path);
};
watch(
  () => route.path,
  () => {
    routePush();
  },
  { immediate: true }
);

// 关闭单个标签
const closeTags = index => {
  const delItem = header.tagsList.splice(index, 1)[0];
  const item = header.tagsList[index] ? header.tagsList[index] : header.tagsList[index - 1];
  if (item) {
    delItem.fullPath === route.fullPath && router.push(item.fullPath);
  }
  const i = header.keepAliveList.findIndex(r => r === delItem.path.replace('/', ''));
  if (i !== -1) header.keepAliveList.splice(i, 1);
};
// 关闭其他标签
const closeOther = val => {
  const curItem = header.tagsList.filter(r => r.fullPath === route.fullPath);
  header.keepAliveList.splice(0, header.keepAliveList.length, route.meta.cache ? curItem[0].path.replace('/', '') : '');
  header.tagsList = curItem;
};
store.dispatch('getInit');
</script>

<style lang="scss" scoped>
.index {
  background-color: #f5f5f5;
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 10px;
  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    overflow: hidden;
    &-header {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-tags {
        flex: 1;
        background-color: #fff;
        padding: 10px;
      }
    }
    &-box {
      flex: 1;
      overflow: hidden;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(100px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}
</style>
